$(document).ready(function () {
    var $menuBtn = $('.header-nav-menubtn')
    var $menu = $('.header-nav-menu')
    var $menuItem = $('.header-nav-menu-item')
    var $submenu = $('.header-nav-submenu')
    var isMobile = $menuBtn.is(':visible')

    var isMenuShow = false
    var isSubmenuShow = false

    function resetMenuHeight () {
        $menuItem.velocity(
            {
                height: $menuItem.outerHeight()
            },
            {
                complete: function () {
                    $submenu.css({ display: 'none', opacity: 0 })
                }
            }
        )
    }

    $(window).on(
        'resize',
        Stun.utils.throttle(function () {
            isMobile = $menuBtn.is(':visible')
            if (isMobile) {
                $submenu.removeClass('hide--force')

                if (isSubmenuShow) {
                    resetMenuHeight()
                    isSubmenuShow = false
                }
            } else {
                $submenu.css({ display: 'none', opacity: 0 })
            }
        }, 200)
    )

    var isNightModeFocus = true
    var $nightMode = $('.mode')

    $(document).on('click', function () {
        if ($menu.is(':visible')) {
            if (isMobile && isSubmenuShow) {
                resetMenuHeight()
                isSubmenuShow = false
            }
            $menu.css({ display: 'none' })
            isMenuShow = false
        }
        if (isNightModeFocus) {
            $nightMode.removeClass('mode--focus')
            isNightModeFocus = false
        }
    })

    Stun.utils.pjaxReloadHeader = function () {
        $menuBtn = $('.header-nav-menubtn')
        $menu = $('.header-nav-menu')
        $menuItem = $('.header-nav-menu-item')
        $submenu = $('.header-nav-submenu')
        isMobile = $menuBtn.is(':visible')

        isMenuShow = false
        isSubmenuShow = false

        function getNightMode () {
            var nightMode = false
            try {
                if (parseInt(Stun.utils.Cookies().get(NIGHT_MODE_COOKIES_KEY))) {
                    nightMode = true
                }
            } catch (err) {
                /* empty */
            }
            return nightMode
        }

        if (CONFIG.nightMode && CONFIG.nightMode.enable) {
            var isNightMode = false
            var NIGHT_MODE_COOKIES_KEY = 'night_mode'
            $nightMode = $('.mode')
            isNightModeFocus = true

            if (getNightMode()) {
                $nightMode.addClass('mode--checked')
                $nightMode.addClass('mode--focus')
                $('html').addClass('nightmode')
                isNightMode = true
            } else {
                isNightMode = false
            }
            $('.mode').on('click', function (e) {
                e.stopPropagation()
                isNightMode = !isNightMode
                isNightModeFocus = true
                Stun.utils.Cookies().set(NIGHT_MODE_COOKIES_KEY, isNightMode ? 1 : 0)
                $nightMode.toggleClass('mode--checked')
                $nightMode.addClass('mode--focus')
                $('html').toggleClass('nightmode')
            })
        }

        $menuBtn.on('click', function (e) {
            e.stopPropagation()
            if (isMobile && isMenuShow && isSubmenuShow) {
                resetMenuHeight()
                isSubmenuShow = false
            }
            if (!isMenuShow) {
                isMenuShow = true
            } else {
                isMenuShow = false
            }
            $menu.velocity('stop').velocity(
                {
                    opacity: isMenuShow ? 1 : 0
                },
                {
                    duration: isMenuShow ? 200 : 0,
                    display: isMenuShow ? 'block' : 'none'
                }
            )
        })

        // Whether to allow events to bubble in the menu.
        var isBubbleInMenu = false
        $('.header-nav-submenu-item').on('click', function () {
            isBubbleInMenu = true
        })

        $menuItem.on('click', function (e) {
            if (!isMobile) {
                return
            }
            var $submenu = $(this).find('.header-nav-submenu')
            if (!$submenu.length) {
                return
            }
            if (!isBubbleInMenu) {
                e.stopPropagation()
            } else {
                isBubbleInMenu = false
            }

            var menuItemHeight = $menuItem.outerHeight()
            var submenuHeight =
                menuItemHeight + Math.floor($submenu.outerHeight()) * $submenu.length
            var menuShowHeight = 0

            if ($(this).outerHeight() > menuItemHeight) {
                isSubmenuShow = false
                menuShowHeight = menuItemHeight
            } else {
                isSubmenuShow = true
                menuShowHeight = submenuHeight
            }
            $submenu.css({ display: 'block', opacity: 1 })
            // Accordion effect.
            $(this)
                .velocity('stop')
                .velocity({ height: menuShowHeight }, { duration: 300 })
                .siblings()
                .velocity({ height: menuItemHeight }, { duration: 300 })
        })

        $menuItem.on('mouseenter', function () {
            var $submenu = $(this).find('.header-nav-submenu')
            if (!$submenu.length) {
                return
            }
            if (!$submenu.is(':visible')) {
                if (isMobile) {
                    $submenu.css({ display: 'block', opacity: 1 })
                } else {
                    $submenu.removeClass('hide--force')
                    $submenu
                        .velocity('stop')
                        .velocity('transition.slideUpIn', { duration: 200 })
                }
            }
        })

        $menuItem.on('mouseleave', function () {
            var $submenu = $(this).find('.header-nav-submenu')
            if (!$submenu.length) {
                return
            }
            if (!isMobile) {
                $submenu.addClass('hide--force')
                isSubmenuShow = false
            }
        })
    }

    Stun.utils.pjaxReloadScrollIcon = function () {
        if (CONFIG.header && CONFIG.header.scrollDownIcon) {
            $('.header-banner-arrow').on('click', function (e) {
                e.stopPropagation()
                $('#container').velocity('scroll', {
                    offset: $('#header').outerHeight()
                })
            })
        }
    }

    // Initializaiton
    Stun.utils.pjaxReloadHeader()
    Stun.utils.pjaxReloadScrollIcon()
})
